<template>  
    <div>
        <el-row>
         <el-col :xs="2" :sm="2" :md="5" :lg="5">&nbsp;</el-col>
          <el-col class="container" :xs="20" :sm="20" :md="14" :lg="14">
          <el-row>
            <el-col class="block" :span="4"><span style="font-size:35px;">发布</span></el-col>
          </el-row>
          <el-row>
            <el-col class="block"  :span="4"><span style="font-size:20px;">选择图片</span></el-col>
          </el-row>
          <el-row class="block">
            <el-col :span="24">
            <div style="float:left;margin:30px;">
            <el-upload
  action="oss-cn-hangzhou.aliyuncs.com"
  :auto-upload="true"
  :limit="2"
   :http-request="upload"
    :before-upload="beforeAvatarUpload"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :before-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
</div>
            </el-col>
          </el-row>
 <el-row>
            <el-col class="block"  :span="4"><span style="font-size:20px;">发布内容</span></el-col>
          </el-row>
          <el-row class="block">
            <el-col :span="24">
            <el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="content"
  maxlength="20"
  show-word-limit
>
</el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="block"  :span="4"><span style="font-size:20px;">选择标签</span></el-col>
          </el-row>
           <el-row>
            <el-col class="block"  :span="24"><el-tag
  :key="tag"
  v-for="tag in dynamicTags"
  closable
  :disable-transitions="false"
  @close="handleClose(tag)">
  {{tag}}
</el-tag>
<el-input
  class="input-new-tag"
  v-if="inputVisible"
  v-model="inputValue"
  ref="saveTagInput"
  size="small"
  @keyup.enter.native="handleInputConfirm"
  @blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"> 添加标签</el-button></el-col>
          </el-row>

          <el-row  style="margin-bottom:20px;">
            <el-col :span="24"><el-button type="primary" @click="submitCreate()">发布</el-button></el-col>
          </el-row>
          </el-col>
          <el-col :xs="2" :sm="2" :md="5" :lg="5">&nbsp;</el-col>
        </el-row>
    </div>  
</template>
<script>
import oss from '../utils/oss'
import VueCropper from 'vue-cropperjs'
export default {
    name:'Create',
    data() {
      return {
          content:'',
          picList:[],
          dynamicTags: [],
          inputVisible: false,
          inputValue: ''
      };
    },
    mounted(){
},
    methods: {
           handleRemove(file, fileList) {
        for(var i = 0;i<fileList.length;i++){
            if(fileList[i] === file){
                this.picList.splice(i,1);
            }
        }      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
         beforeAvatarUpload(file) {
          this.imageUrl='';
         const isPNG= file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 4;

        if (!isPNG) {
          this.$message.error('上传图片只能是 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 4MB!');
        }
        return isPNG && isLt2M;
      },
      async upload(option) {
        oss.ossUploadFile(option);  
        this.picList.push(oss.getFileName());
              },
       handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push('#'+inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      submitCreate(){
          var that=this;
          var isComplete = false;
          if(that.picList.length == 2 && that.content != '' && that.dynamicTags.length != 0){
              isComplete = true;
          }
          if(isComplete){
              var user = that.$session.get('USERID');
                that.$axios.post('share/create',{userId:user,
                                                 pic:that.picList,
                                                 tags:that.dynamicTags,
                                                 content:that.content}).then(function(res){
               if(res.data.code == 200){
                   that.$message({
                   message: '发布成功',
                   type: 'success'
        });
              that.$router.go(0);
               }
                else{
                  that.$message.error(res.data.body);
                }
    }).catch(function (error) {
        that.$message.error(' 请检查网络是否通畅');
    });
          }
          else{
               that.$message.error('请填写完整后再提交');
          }
      }
      
  }
}
</script>
<style>
.container{
    background-color:#FFF;
}
.block{
    margin:20px;
}
.el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>